/* eslint-disable react-hooks/exhaustive-deps */
import {
  ApiOutlined,
  DeleteOutlined,
  EditOutlined,
  ExclamationCircleOutlined,
  HddOutlined,
  SearchOutlined,
  SyncOutlined,
  UpOutlined,
  DownOutlined
} from '@ant-design/icons'
import { useRequest } from '@umijs/hooks'
import { Button, Card, Cascader, Col, Drawer, Form, Input, message, Modal, Popover, Row, Select, Table, Tag } from 'antd'
import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import TableToolbar from '../../../../../components/TableSetting/TableToolbar'
import { IconFont } from '../../../../../utils/Iconfont'
import { fetchRequest } from '@/utils/Request'
import { url } from '@/utils/url'
import { actionTypes as deptActionType } from '../../../../DepartmentManage/actionTypes'
import '../../../../DepartmentManage/views/style.css'
import actionTypes from '../../../actionTypes'
import '../../index.css'
import AddEntrance from './AddStudentEntrance'
import DeviceInfoList from './DeviceInfoList'
import ModifyEntrance from './ModifyStudentEntrance'
import StaffEntranceInfo from './StudentEntranceInfo'
import ModifyStduentAddressEntrance from "./ModifyStudentAddressEntrance";
import { useSingleState } from "nice-hooks";
import { ClassInfo } from '@/components/Information/Index'
import "./index.less"
import VisualAreaSize from "@/components/VisualAreaSize"
interface Detail {
  visible: boolean,
  content: any
}

interface RequestAddres {
  level: number,
  collegeId: string,
  collegeAreaId: string,
  building: string,
  unit: string,
  floor: string
}

interface RequestParams {
  studentName: string,
  accessState: number,
  healthCodeState: number,
  studentId: string,
  collegeId: string,
  collegeAreaId: string,
  building: string,
  unit: string,
  floor: string,
  room: string,
  page: number,
  size: number
}

interface CheckParams {
  "accessCardId": string,
  "deptId": string

}

export default function StudentAccessManageTable() {
  const [addressNode, setAddressNode] = useState([])
  const [expand, setExpand] = useState(false);

  const [deviceInfo, setdeviceInfo] = useState<{ visible: boolean, content: any[] }>({ visible: false, content: [] })
  //

  const OnChange = (value: any, selectedOptions: any) => {
    console.log('selectedOptions', selectedOptions);
  };
  const loadData = (selectedOptions: any) => {
    //
    const targetOption = selectedOptions[selectedOptions.length - 1];
    targetOption.loading = true;
    let jsondata: any = [];
    let addrArray: any = [];
    selectedOptions.forEach(function (item: any) {
      addrArray.push(item['value'])
    })
    console.log("addrArray")
    console.log(addrArray)
    getAllAdd({
      "level": targetOption['level'] + 1,
      "collegeId": typeof addrArray[0] === "undefined" ? "" : addrArray[0],
      "collegeAreaId": typeof addrArray[1] === "undefined" ? "" : addrArray[1],
      "building": typeof addrArray[2] === "undefined" ? "" : addrArray[2],
      "unit": typeof addrArray[3] === "undefined" ? "" : addrArray[3],
      "floor": typeof addrArray[4] === "undefined" ? "" : addrArray[4]

    }).then((e: any) => {
      jsondata = e
    })
    setTimeout(() => {
      targetOption.loading = false;
      targetOption.children = jsondata;
      setAddressNode([...addressNode])
    }, 1000);
  };

  const columns = [
    {
      title: "姓名",
      dataIndex: "studentName",
      key: 'studentName'
    },
    {
      title: "联系电话",
      dataIndex: "phone",
      key: 'phone',
      // render: (text: string) => getOriginString(text)
    },
    // {
    //     title: "编号",
    //     dataIndex: "studentId",
    //     key: 'studentId',
    // },
    {
      title: "开门方式",
      dataIndex: "openType",
      key: 'openType',
      render: (record: any) => {
        // console.log("开门方式")
        // console.log(record.openType.face)
        return <span>
          <Popover content="人脸开门">
            <IconFont type="icon-renlian" style={{ marginRight: '10px' }}
              className={!record.openType.face ? 'cardNotOpen' : 'cardOpened'} />
          </Popover>
          <Popover content="白卡开门">
            <IconFont type="icon-menjinqiabanli" style={{ marginRight: '10px' }}
              className={!record.openType.whiteCard ? 'cardNotOpen' : 'cardOpened'} />
          </Popover>
          <Popover content="翼卡通开门">
            <IconFont type="icon-shoujikaimen"
              className={!record.openType.blackCard ? 'cardNotOpen' : 'cardOpened'} />
          </Popover>
        </span>
      }


    },
    {
      title: "门禁状态",
      dataIndex: 'state',
      key: 'state',
      render: (text: number) => {
        return text === 1 ? <Tag color="#3ae0b0" className='executed'>已生效</Tag> : text === 6 ?
          <Tag color="#f50" className='defeated'>推送失败</Tag> :
          <Tag color="#2db7f5" className='toPush'>待推送</Tag>;
      }
    },
    {
      title: "防疫核验",
      key: 'healthCode',
      render: (record: any) => {
        return <Tag color={(record.healthCode === undefined || record.healthCode === null) ?
          undefined : record.healthCode.color}>{(record.healthCode === undefined || record.healthCode === null) ? "" :
            record.healthCode.stateName}</Tag>
      }
    },
    {
      title: "操作",
      render: (record: any) => {
        return <span onClick={e => e.stopPropagation()}>
          <Tag className="tags-hover" color="#108ee9" icon={<EditOutlined />} onClick={() => {
            setmodifyInfo({ visible: true, content: record })
          }}>编辑</Tag>
          <Tag className="tags-hover" color="#108ee9" icon={<HddOutlined />} onClick={() => {
            showtmodifyAddress(record)
          }}>更换宿舍</Tag>
          <Tag className="tags-hover" color="#108ee9" icon={<ApiOutlined />} onClick={() => {
            setdeviceInfo({ visible: true, content: record.deviceList })
          }}>查看设备</Tag>

          <Tag className="tags-hover delete" color="#f50" onClick={e => {
            showDeleteConfirm(record)
            // checkAccess.run({ accessCardId: record.accessCardId, deptId: record.deptId })
          }} icon={<DeleteOutlined />}>删除</Tag>
        </span>
      }
    }]

  const [requestParams, setrequestParams] =
    useState<any>({
      studentName: "",
      accessState: -1,
      healthCodeState: -1,
      studentId: "",
      collegeId: "",
      collegeAreaId: "",
      building: "",
      unit: "",
      floor: "",
      room: "",
      page: 1,
      size: 10,
      idCard: '',
    })
  //
  const [addVisible, setaddVisible] = useState<boolean>(false)

  const [columnsKey, setcolumnsKey] = useState<any[]>([])

  const [realColumns, setrealColumns] = useState<any[]>([])
  //
  const [modifyInfo, setmodifyInfo] = useState<{ visible: boolean, content: any }>({ visible: false, content: null })
  const [requestAddress, setRequestAddress] = useState<any>({
    "level": 0,
    "collegeId": "",
    "collegeAreaId": "",
    "building": "",
    "unit": "",
    "floor": ""
  })
  // const [addressNode,setAddressNode] =useSingleState([])
  const [modifyAddressInfo, setmodifyAddressInfo] = useState<{ visible: boolean, content: any }>({
    visible: false,
    content: null
  })
  //
  //
  const [delayInfo, setdelayInfo] = useState<{ visible: boolean, sendData: any, selData: number }>({
    visible: false,
    sendData: {},
    selData: 0
  })
  const [state, setState] = useSingleState({ addressNode: "", content: "" });
  //
  const [form] = Form.useForm()
  //
  const showtmodifyAddress = (info: any) => {
    setState({ content: info })
    getAllAddress.run(requestAddress)
  }
  //
  const getAllAddress = useRequest(getAllAddressNode, {
    manual: true,
    loadingDelay: 200
  })
  const getAllAddress1 = useRequest(getAllAddressNode1, {
    manual: true,
    loadingDelay: 200
  })

  //
  async function getAllAdd(params: RequestAddres) {
    try {
      const json = await fetchRequest(url.GET_ADDRESS_NODE, params);
      if (json.success) {
        return json.data
      } else {
        return []
      }
    } catch (error: any) {
      message.destroy();
      message.error(error.message)
    }
  }


  async function getAllAddressNode1(params: RequestAddres) {
    try {
      const json = await fetchRequest(url.GET_ADDRESS_NODE, params);
      if (json.success) {
        // console.log('getAllAddressNode:',json)
        setAddressNode(json.data)
        // return json.data
      } else {
        // console.log('getAllAddressNode:',json)
        // return []
      }
    } catch (error: any) {
      // console.log('getAllAddressNode:',error)
    }
  }

  async function getAllAddressNode(params: RequestAddres) {
    try {
      const json = await fetchRequest(url.GET_ADDRESS_NODE, params);
      console.log("级联下拉菜单")
      console.log(json.data)
      if (json.success) {
        setmodifyAddressInfo({ visible: true, content: { content: state.content, addressNode: json.data } })
      } else {
        message.destroy();
        message.error(json.error)
      }
    } catch (error: any) {
      message.destroy();
      message.error(error.message)
    }
  }

  //
  const showDeleteConfirm = (info: any) => {
    console.log("删除信息")
    console.log(info)
    Modal.confirm({
      title: '确定删除该门禁卡?',
      icon: <ExclamationCircleOutlined />,
      okText: '删除',
      okType: 'danger',
      cancelText: '取消',
      onOk() {
        deleteAccess({
          accessCardId: info.accessCardId,
          addressId: info.addressId
        })
      },
    });
  }
  //
  // const checkAccess = useRequest(checkAccessCard, {
  //     loadingDelay: 200,
  //     manual: true
  // })
  //
  //     //删除的请求函数
  const deleteAccess = async (params: any) => {

    try {
      const json = await fetchRequest(url.DELETE_ACCESS_CARD_URL, params);
      if (json.success) {
        // setrequestParams({...requestParams,})
        message.destroy();
        message.success("删除成功!")
        if (tableData.count > requestParams.size && tableData.count === requestParams.page * requestParams.size) {
          setrequestParams({ ...requestParams, page: requestParams.page })
        } else {
          getAccess.run(requestParams)
        }
      } else {
        message.destroy();
        message.error(json.error)
      }
    } catch (error: any) {
      message.destroy();
      message.error(error.message)

    }
  }
  //
  //     //点击搜索按钮
  const handleFinish = (values: any) => {

    setrequestParams({
      studentName: typeof values.userName === "undefined" ? "" : values.userName,
      accessState: typeof values.accessCardState === "undefined" ? -1 : values.accessCardState,
      healthCodeState: values.healthState ?? -1,
      studentId: typeof values.studentId === "undefined" ? "" : values.studentId,
      collegeId: typeof values.allAddress === "undefined" ? "" : values.allAddress[0],
      collegeAreaId: typeof values.allAddress === "undefined" ? "" : values.allAddress[1],
      building: typeof values.allAddress === "undefined" ? "" : values.allAddress[2],
      unit: typeof values.allAddress === "undefined" ? "" : values.allAddress[3],
      floor: typeof values.allAddress === "undefined" ? "" : values.allAddress[4],
      room: typeof values.allAddress === "undefined" ? "" : values.allAddress[5],
      page: 1, size: 10,
      idCard: values?.idCard ?? '',
      phone: values?.phone ?? ''
    })
  }
  //

  //点击重置按钮
  const handleReset = () => {
    form.resetFields();
    setrequestParams({
      studentName: "",
      accessState: -1,
      healthCodeState: -1,
      studentId: "",
      collegeId: "",
      collegeAreaId: "",
      building: "",
      unit: "",
      floor: "",
      room: "",
      page: 1,
      size: 10
    })
  }
  //
  //获取管理的组织机构
  async function getDeptListRequest() {
    try {
      const json = await fetchRequest(url.GET_DEPARTMENT_URL, "");
      // console.log(json)
      if (json.success) {
        deleteEmpty(json.deptData)
        dispatch({ type: deptActionType.GET_DEPT_TABLE, payload: json.deptData })
      } else {
        message.destroy();
        message.error(json.error)
      }
    } catch (error: any) {
      message.destroy();
      message.error(error.message)
    }
  }


  //递归删除空的children
  function deleteEmpty(arr: any[]) {
    arr.map(item => {
      if (item.children.length === 0) {
        delete item.children
      } else {
        deleteEmpty(item.children)
      }
    })
  }

  const getDept = useRequest(getDeptListRequest, {
    loadingDelay: 200
  })

  //     //获取redux中的tableData
  const tableData = useSelector((state: any) => {
    // console.log(state.entranceManage.entranceManage)

    const data = state.deptManage.deptData
    disableSelect(data)


    return {
      ...state.entranceManage.entranceManage,
      deptData: data
    }
  })
  // console.log("tableData"+tableData.total)


  // const data = [{}]


  const [detail, setDetail] = useState<Detail>({ visible: false, content: null })
  /*批量删除弹出层*/
  const [isDelete, setIsDelete] = useState(false)


  //监听变化
  useEffect(() => {
    const realColumns = columns.filter(item => columnsKey.indexOf(item.key) !== -1)
    setrealColumns(realColumns)
  }, [columnsKey])


  //点击行的时候
  function onRowClick(value: any) {
    console.log(value)
    setDetail({ visible: true, content: value })
  }

  //当列设置改变的时候
  function onColumnsChange(checkedList: any[]) {
    // console.log(checkedList)
    setcolumnsKey(checkedList)
  }


  //获得门禁人员信息管理的table
  const getAccess = useRequest(getAccessInfo, {
    loadingDelay: 200,
    manual: true
  })

  //监听请求参数的变化 变化之后进行请求
  useEffect(() => {
    getAccess.run(requestParams)
  }, [requestParams])
  //     //监听请求参数的变化 变化之后进行请求
  useEffect(() => {
    getAllAddress1.run(requestAddress)
  }, [requestAddress])
  //
  //递归修改item的key
  function disableSelect(arr: any[],) {
    arr.map(item => {
      delete item.disabled
      item.key = item.deptID
      item.value = item.deptID
      if (typeof item.children === "undefined" || item.children === null || item.children.length === 0) {
        return;
      } else {
        disableSelect(item.children)
      }
    })
  }


  const dispatch = useDispatch();

  //异步请求的接口
  async function getAccessInfo(params: RequestParams) {
    // console.log("门禁请求的参数")
    // console.log(params)
    try {
      const json = await fetchRequest(url.GET_ACCESS_USER_TABLE, params);
      if (json.success) {
        dispatch({
          type: actionTypes.GET_ENTRANCE_MANAGE_TABLE,
          payload: { data: json.data.rows, count: json.size, total: json.data.total }
        })
      } else {
        message.destroy();
        message.error(json.error)
      }
    } catch (error: any) {
      message.destroy();
      message.error(error.message)
    }
  }

  //点击刷新按钮
  function onRefresh() {
    getAccess.run(requestParams)
  }

  //点击新增按钮
  function onAdd() {
    setaddVisible(true)
  }


  //修改成功
  function modifySuccess() {
    console.log("调用modifysucces")
    message.destroy();
    message.success("修改成功!")
    setmodifyInfo({ ...modifyInfo, visible: false });
    getAccess.run(requestParams)
  }

  //修改成功
  function modifyAddressSuccess() {
    console.log("modifyAddressSuccess")
    message.destroy();
    message.success("更换宿舍成功!")
    setmodifyAddressInfo({ ...modifyAddressInfo, visible: false });
    getAccess.run(requestParams)
  }

  //新增成功
  function addSuccess() {
    message.destroy();
    message.success("新增成功!");
    setaddVisible(false);
    getAccess.run(requestParams)
  }


  //点击分页的时候
  function handlePageChange(page: number,pageSize:number) {
    setrequestParams({
      ...requestParams,
      num:pageSize,
      page: page
    })
    setSelectedRowKeys([])
  }

  function handleDenyChange(value: number) {
    setdelayInfo({ ...delayInfo, selData: value })
  }



  /*请求批量删除*/
  let depIdList: any[] = []


  const { data, run } = useRequest((ids: number[]) => fetchRequest(url.DELETE_ADDRESS_CARD, {
    ids: ids
  }), {
    onSuccess: (result: any) => {
      if (result.success) {
        message.success('删除成功')

      } else {
        message.error(result.error)
      }


    },
    manual: true

  })


  /*点击批量删除确定按钮*/
  const handleOk = async () => {
    const depId = depIdList[depIdList.length - 1]
    if (!depId) {
      message.error('请选择组织机构')
      return
    }
    await run(depId)
    onRefresh()
    setIsDelete(!isDelete)


  }
  const onChange = (list: any[]) => {
    depIdList = list

  }

  const { data: stateData } = useRequest(() => fetchRequest(url.CODE_STATE, {}))


  const stateList = stateData?.data

  const DeleteDrawer = (
    <Modal title="批量删除" onCancel={() => setIsDelete(false)} onOk={handleOk} visible={isDelete} destroyOnClose>
      <Row style={{ alignItems: 'center' }}>
        <Col span={4}>组织机构:</Col>
        <Col span={20}>
          <ClassInfo onChange={onChange} isParentSelect={true} />
        </Col>
      </Row>
    </Modal>
  )

  function filter(inputValue: any, path: any[]) {
    return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
  }

  const datas = [
    {
      name: '姓名',
      key: 'userName',
      val: <Input className="search-item" />
    },
    {
      name: '电话号码',
      key: 'phone',
      val: <Input className="search-item" />
    },
    {
      name: '身份证',
      key: 'idCard',
      val: <Input className="search-item" />
    },
    {
      name: '门禁状态',
      key: 'accessCardState',
      val: <Select className="search-item">
        <Select.Option value={1}>已生效</Select.Option>
        <Select.Option value={4}>待推送</Select.Option>
        <Select.Option value={6}>推送失败</Select.Option>
      </Select>
    },
    {
      name: '防疫核验状态',
      key: 'healthState',
      val: <Select className="search-item">
        {stateList?.map((item: any) => <Select.Option value={item.value}
          key={item.value}>{item.label}</Select.Option>)}

      </Select>
    },
    {
      name: '设备地址',
      key: 'allAddress',
      val: <Cascader
        placeholder="请输入设备地址"
        options={addressNode}
        loadData={loadData}
        changeOnSelect
        className="search-item"

        showSearch={{ filter }}
        onChange={OnChange}
      />
    },
  ]
  const [count, setcount] = useState(expand ? datas.length : 4)
  const [numSpan, setnumSpan] = useState(6)
  let VisuaSize = VisualAreaSize()
  useEffect(() => {
  }, [expand])
  const getFields = () => {
    const children = [];
    for (let i = 0; i < count; i++) {
      children.push(
        <Col span={numSpan} key={i}>
          <Form.Item
            name={datas[i].key}
            label={datas[i].name}
          >
            {datas[i].val}
          </Form.Item>
        </Col>,
      );
    }
    return children;
  };
  const expendClick = () => {
    setExpand(!expand)
    if (expand) {
      if (VisuaSize < 1700 && VisuaSize > 1500) {
        setcount(3)
        setnumSpan(8)
      } else if (VisuaSize > 1700) {
        setcount(4)
        setnumSpan(6)
      } else if (VisuaSize < 1500 && VisuaSize > 1100) {
        setcount(2)
        setnumSpan(12)
      } else if (VisuaSize < 1100) {
        setcount(1)
        setnumSpan(24)
      }
    } else {
      setcount(datas.length)
    }
  }
  useEffect(() => {
    if (VisuaSize < 1700 && VisuaSize > 1500) {
      setcount(3)
      setnumSpan(8)
    } else if (VisuaSize > 1700) {
      setcount(4)
      setnumSpan(6)
    } else if (VisuaSize < 1500 && VisuaSize > 1100) {
      setcount(2)
      setnumSpan(12)
    } else if (VisuaSize < 1100) {
      setcount(1)
      setnumSpan(24)
    }
  }, [VisuaSize])
  const searchForm = (
    <Card className="search-form"> <Form form={form} layout="inline"
      onFinish={handleFinish} onReset={handleReset}>
      <Row gutter={8} className='leftRow'>{getFields()}</Row>
      <Row gutter={24} className='rightRow'>
        <Col span={24} style={{ textAlign: 'right', width: '270px' }}>
          <Button key="1" type="primary" icon={<SearchOutlined />} htmlType="submit"
            style={{ marginRight: '8px' }}>搜索</Button>
          <Button key="2" icon={<SyncOutlined />} htmlType="reset" style={{ marginRight: '8px' }}>重置</Button>
          <span
            style={{ fontSize: 12, color: "#1153ff" }}
            onClick={expendClick}
          >
            {expand ? <UpOutlined /> : <DownOutlined />} {expand ? "收起" : "展开"}
          </span>
        </Col>
      </Row>
    </Form></Card>
  )
  //查询框
  // const searchForm = (<Card className="search-form"> <Form form={form} layout="inline"
  //     // initialValues={{ healthState: -1 }}
  //     onFinish={handleFinish} onReset={handleReset}>

  //     <Form.Item className="form-control-item" name="userName" label="姓名">
  //         <Input className="search-form-item" />
  //     </Form.Item>

  //     {/*<Form.Item className="form-control-item" name="studentId" label="编号">*/}
  //     {/*    <Input/>*/}
  //     {/*</Form.Item>*/}

  //     <Form.Item className="form-control-item" name="phone" label="电话号码">
  //         <Input />
  //     </Form.Item>

  //     <Form.Item className="form-control-item" name="idCard" label="身份证">
  //         <Input className="search-form-item" />
  //     </Form.Item>

  //     <Form.Item className="form-control-item" name="accessCardState" label="门禁状态">
  //         <Select className="search-form-item">
  //             <Select.Option value={1}>已生效</Select.Option>
  //             <Select.Option value={4}>待推送</Select.Option>
  //             <Select.Option value={6}>推送失败</Select.Option>
  //         </Select>
  //     </Form.Item>

  //     <Form.Item className="form-control-item" name="healthState" label="防疫核验状态">
  //         <Select className="search-form-item">
  //             {stateList?.map((item: any) => <Select.Option value={item.value}
  //                 key={item.value}>{item.label}</Select.Option>)}

  //         </Select>
  //     </Form.Item>

  //     <Form.Item className="form-control-item" name="allAddress" label="设备地址">

  //         <Cascader
  //             placeholder="请输入设备地址"
  //             options={addressNode}
  //             loadData={loadData}
  //             changeOnSelect
  //             onChange={OnChange}
  //         />
  //     </Form.Item>


  //     <Form.Item className="form-control-item">
  //         <Button key="1" type="primary" icon={<SearchOutlined />} htmlType="submit"
  //             style={{ marginRight: '8px' }}>搜索</Button>
  //         <Button key="2" icon={<SyncOutlined />} htmlType="reset" style={{ marginRight: '8px' }}>重置</Button>


  //     </Form.Item>

  // </Form></Card>)
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  const handleDelete = () => {
    // setIsDelete(!isDelete)
    if(selectedRowKeys.length<=0)
    {
      message.error('请选择学生')
      return
    }
    Modal.confirm({
      title: '提示',
      content: '是否批量删除',
      okText: '确认',
      cancelText: '取消',
      onOk: async () => {
        await run(selectedRowKeys as number[])
        onRefresh()
        setSelectedRowKeys([])
      }
    });


  }

  return (
    <div>
      {searchForm}
      {DeleteDrawer}
      <Card className="search-form-table">
        <TableToolbar tableName="门禁信息管理表" columns={columns} onColumnsChange={onColumnsChange}
          onRefresh={onRefresh} onAdd={onAdd}>

          <Button icon={<DeleteOutlined />} style={{
            color: '#fff',
            borderColor: '#ff4d4f',
            background: '#ff0505',
            margin: '0 10px'

          }}
            onClick={handleDelete}
          >批量删除</Button>
        </TableToolbar>


        <Table
          loading={getAccess.loading}
          rowSelection={rowSelection}
          pagination={{
            total: tableData.total,
            hideOnSinglePage: true,
            simple: false,
            onChange: handlePageChange,
            current: requestParams.page,
            showSizeChanger: false
          }} onRow={(record: any) => {
            return { onClick: e => onRowClick(record) }
          }} rowKey={(record: any) => record.accessCardId} columns={realColumns}
          dataSource={tableData.data}
        />

      </Card>
      <Drawer width="70%" destroyOnClose visible={detail.visible} onClose={() => {
        getAccess.run(requestParams)
        setDetail({ ...detail, visible: false });
      }} title="详细信息">
        <StaffEntranceInfo content={detail.content} />
      </Drawer>


      <Drawer width="60%" destroyOnClose visible={addVisible} title="新增人员门禁" onClose={() => setaddVisible(false)}>
        <AddEntrance addSuccess={addSuccess} />
      </Drawer>

      <Drawer width="60%" title="修改门禁信息" destroyOnClose visible={modifyInfo.visible}
        onClose={() => setmodifyInfo({ ...modifyInfo, visible: false })}>
        <ModifyEntrance content={modifyInfo.content} modifySuccess={modifySuccess} />
      </Drawer>


      <Drawer width="60%" title="更换宿舍" destroyOnClose visible={modifyAddressInfo.visible}
        onClose={() => setmodifyAddressInfo({ ...modifyAddressInfo, visible: false })}>
        <ModifyStduentAddressEntrance content={modifyAddressInfo.content}
          modifyAddressSuccess={modifyAddressSuccess} />
      </Drawer>

      <Drawer width="60%" title="设备信息" destroyOnClose visible={deviceInfo.visible}
        onClose={() => setdeviceInfo({ ...deviceInfo, visible: false })}>
        <DeviceInfoList content={deviceInfo.content} onClose={() => {
          getAccess?.run(requestParams);

          setdeviceInfo({ ...deviceInfo, visible: false })
        }} />
      </Drawer>
    </div>
  )
}
